<script setup lang="ts">
import { ref } from 'vue'
import NavMenu from '@/components/layout/NavMenu.vue'
import TopNavbar from '@/components/layout/TopNavbar.vue'
import DataOverview from '@/components/dataAnalytics/DataOverview.vue'
import UserDataTab from '@/components/dataAnalytics/UserDataTab.vue'
import PluginDataTab from '@/components/dataAnalytics/PluginDataTab.vue'
import ProjectDataTab from '@/components/dataAnalytics/ProjectDataTab.vue'

// 当前活动标签
const activeTab = ref('user-data')

// 切换标签
const handleTabChange = (tabId: string) => {
  activeTab.value = tabId
}

// 标签定义
const tabs = ref([
  { id: 'user-data', name: '用户数据', icon: 'fas fa-users' },
  { id: 'plugin-data', name: '插件数据', icon: 'fas fa-puzzle-piece' },
  { id: 'project-data', name: '工程数据', icon: 'fas fa-project-diagram' }
])
</script>

<template>
  <div class="flex h-screen bg-gray-50">
    <!-- 左侧菜单 -->
    <NavMenu class="h-full" />
    
    <!-- 主要内容区域 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <TopNavbar />
      
      <!-- 页面内容 -->
      <main class="flex-1 overflow-y-auto p-6">
        <!-- 数据概览卡片 -->
        <DataOverview class="mb-8" />
        
        <!-- Tab标签区域 -->
        <div class="mb-6">
          <!-- 标签导航栏 -->
          <div class="tab-navigation border-b border-gray-200 mb-4">
            <div class="flex space-x-8">
              <div 
                v-for="tab in tabs" 
                :key="tab.id"
                class="tab-item pb-3 px-2 cursor-pointer"
                :class="activeTab === tab.id ? 'active' : ''"
                @click="handleTabChange(tab.id)"
              >
                <div class="flex items-center space-x-2">
                  <i :class="[tab.icon, activeTab === tab.id ? 'text-amber-500' : 'text-gray-500']"></i>
                  <span :class="activeTab === tab.id ? 'text-amber-500' : 'text-gray-500'">{{ tab.name }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 标签内容 -->
          <div class="tab-content">
            <UserDataTab v-if="activeTab === 'user-data'" />
            <PluginDataTab v-if="activeTab === 'plugin-data'" />
            <ProjectDataTab v-if="activeTab === 'project-data'" />
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped>
.text-amber-500 {
  color: #f59e0b;
}
.bg-amber-100 {
  background-color: #fef3c7;
}
.tab-item {
  position: relative;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f59e0b;
}
</style> 